<template>
	<view class="container">

		<!-- 自定义头部 -->
		<BhTitle titleText="填写商铺信息"></BhTitle>
		<!-- ///图片 -->
		<view class="bh-row bh-justify-center bh-align-stretch header">
			<view class="bh-row bh-justify-start bh-align-end">
				<image src="../images/post_add/post_add_face.png" mode="scaleToFill" style="width:236rpx;height: 217rpx;" />
			</view>
			<view class="bh-row bh-justify-start bh-align-center" style="height: 100%;">
				<view class="bh-row bh-justify-center bh-align-center tips">
					<image src="../images/post_add/post_add_tips_text.png" mode="scaleToFill" style="width: 307rpx;height: 75rpx;" />
				</view>
			</view>
		</view>
		<!-- 选项列表 -->
		<view class="body">
			<view class="field-wrap bh-row bh-justify-space-between">
				<view class="bh-row">
					<view class="field-prefix"></view>
					<view class="f32 fw600">
						区域
					</view>
				</view>
				<view @click="() => { this.showAreaStreetSheet = true }" :class="['bh-row', 'c9', 'f28', 'field-inactive', !postDto.area ? '' : 'field-active']">
					<view class="">{{ !postDto.area ? '请选择' : `${postDto.area}&nbsp;${postDto.street}` }}</view>
					<image src="../../static/images/li-right.png" class="comment_right" mode=""></image>
				</view>
			</view>
			<view class="field-wrap bh-row bh-justify-space-between">
				<view class="bh-row">
					<view class="field-prefix"></view>
					<view class="f32 fw600">
						地址
					</view>
				</view>
				<view :class="['bh-row', 'c9', 'f28', 'field-inactive', !postDto.address ? '' : 'field-active']">
					<input type="text" :class="!postDto.address ? '' : 'field-active'"  v-model="postDto.address" @input="" placeholder="请填写" placeholder-style="color: #999;font-size: 28rpx;">
					<view class="comment_right"></view>
				</view>
			</view>
			<view class="field-wrap bh-row bh-justify-space-between">
				<view class="bh-row">
					<view class="field-prefix"></view>
					<view class="f32 fw600">
						商铺类型
					</view>
				</view>
				<view :class="['bh-row', 'c9', 'f28', 'field-inactive', !postDto.industryId ? '' : 'field-active']">
					<show-common-picker @confirm="showCommonPickerConfirm" :current-dto="postDto" current-field="industryId">
						<view class="" v-if="!postDto.industryId">请选择</view>
						<!-- <view class="uni-input c6" v-else>{{ postDto.industryIdPickerValue }}</view> -->
						<view class="uni-input c6"  style="color: #333;" v-else>{{ industryName }}</view>
						<!-- <view class="uni-input c6" v-else>{{industryList[industryIndex].name}}</view> -->
					</show-common-picker>
					<image src="../../static/images/li-right.png" class="comment_right" mode=""></image>
				</view>
			</view>

			<!-- <view class="field-wrap bh-row bh-justify-space-between">
				<view class="bh-row">
					<view class="field-prefix"></view>
					<view class="f32 fw600">
						当前商铺类型？
					</view>
				</view>
				<view class="bh-row c9 f28">
					<show-common-picker @confirm="showCommonPickerConfirm" :current-dto="postDto" current-field="shopType">
						<view class="" v-if="postDto.shopType == null || postDto.shopType == undefined">请选择</view>
						<view class="uni-input c6" v-else>{{ postDto.shopTypePickerValue }}</view>
					</show-common-picker>
					<image src="../../static/images/li-right.png" class="comment_right" mode=""></image>
				</view>
			</view> -->

			<view class="field-wrap bh-row bh-justify-space-between">
				<view class="bh-row">
					<view class="field-prefix"></view>
					<view class="f32 fw600">
						店铺面积
					</view>
				</view>
				<view :class="['bh-row', 'c9', 'f28', 'field-inactive', !postDto.acreage ? '' : 'field-active']">
					<input type="number" :class="!postDto.acreage ? '' : 'field-active'"  v-model="postDto.acreage" placeholder="请填写" placeholder-style="color: #999;font-size: 28rpx;">
					<view class="ml10 c6">m²</view>
				</view>
			</view>

			<view class="field-wrap bh-row bh-justify-space-between">
				<view class="bh-row">
					<view class="field-prefix"></view>
					<view class="f32 fw600">
						月租金
					</view>
				</view>
				<view class="bh-row c9 f28">
					<input type="number" :class="!postDto.rent ? '' : 'field-active'" v-model="postDto.rent" placeholder="请填写" placeholder-style="color: #999;font-size: 28rpx;">
					<view class="ml10 c6">元/月</view>
				</view>
			</view>

			<!-- <view class="field-wrap bh-row bh-justify-space-between">
				<view class="bh-row">
					<view class="field-prefix"></view>
					<view class="f32 fw600">
						免租期
					</view>
				</view>
				<view class="bh-row c9 f28">
					<input type="number" v-model="postDto.freeRentDays" placeholder="请填写" placeholder-style="color: #999;font-size: 28rpx;">
					<view class="comment_right">元/月</view>
				</view>
			</view> -->

			<view class="field-wrap bh-row bh-justify-space-between">
				<view class="bh-row">
					<view class="field-prefix"></view>
					<view class="f32 fw600">
						转让费
					</view>
				</view>
				<view class="bh-row c9 f28">
					<input type="number" :class="!postDto.transferFee ? '' : 'field-active'" v-model="postDto.transferFee" placeholder="请填写" placeholder-style="color: #999;font-size: 28rpx;">
					<view class="ml10 c6">元</view>
				</view>
			</view>

			<view class="field-wrap bh-row bh-justify-space-between">
				<view class="bh-row">
					<view class="field-prefix"></view>
					<view class="f32 fw600 ">
						是否接受面议
					</view>
				</view>
				<view class="bh-row">
					<view @click="() => { postDto.transferFeeDiscuss = 1 }" class="small-btn" :class="postDto.transferFeeDiscuss == 1 ? 'active' : ''">
						是
					</view>
					<view @click="() => { postDto.transferFeeDiscuss = 0 }" class="small-btn" :class="postDto.transferFeeDiscuss == 0 ? 'active' : ''">
						否
					</view>
				</view>

			</view>

			<view class="field-wrap bh-row bh-justify-space-between">
				<view class="bh-row">
					<view class="field-prefix"></view>
					<view class="f32 fw600">
						选择您的店铺标签
					</view>
				</view>
				<view @click="showAddPostLabel = true" class="bh-row c9 f28">
					<view class="" v-if="!postDto.labelDtoList || postDto.labelDtoList.length <= 0">请选择</view>
					<view class="uni-input c6" v-else>{{ postDto.labelDtoList[0].labelName }}</view>
					<image src="../../static/images/li-right.png" class="comment_right" mode=""></image>
				</view>
			</view>

			<view class="field-wrap bh-row bh-justify-space-between">
				<view class="bh-row">
					<view class="field-prefix"></view>
					<view class="f32 fw600">
						留下您的联系方式
					</view>
				</view>
				<view class="bh-row c9 f28">
					<input v-model="postDto.contactPhone" :class="!postDto.contactPhone ? '' : 'field-active'" type="text" placeholder="请填写" placeholder-style="color: #999;font-size: 28rpx;">
					<view class="comment_right"></view>
				</view>
			</view>

			<view class="bh-round-btn" @click="postAdd('base')">
				保存
			</view>
		</view>

		<show-area-street-sheet :show="showAreaStreetSheet" :current-dto="postDto" @close="showAreaStreetSheetClose" @confirm="showAreaStreetSheetConfirm">

		</show-area-street-sheet>
		<show-add-post-label-sheet :show="showAddPostLabel" 
		:init-label-list="postDto.labelDtoList" @confirm="confirmLabels" @close="showAddPostLabel = false">

		</show-add-post-label-sheet>

		<!-- 租金选择弹窗 -->
		<view class="bh-black-bg" v-if="rent">
			<view class="bh-dialog-view rent">
				<view class="mb40 fw600 f32">租金预算</view>
				<view class="mb40 f32" v-for="(item, index) in yusuan" :key="index">
					{{ item }}
				</view>

				<!-- //租金区间滑块组件 -->
				<view class="rowBox mrg50T">
					<view class="sliderBox">
						<RangeSlider :width="670" :max="slideMax" :values="rangeValues" @rangechange="onRangeChange">
							<view slot="minBlock" class="range-slider-block">{{ rangeValues[0] }}</view>
							//左边滑块的内容
							<view slot="maxBlock" class="range-slider-block">{{ rangeValues[1] }}</view>
							//右边滑块的内容
						</RangeSlider>
					</view>

				</view>
				<!-- //租金区间滑块组件 结束-->
				<view class="f28 c9">*单位（k）</view>

				<view class="bh-round-btn">
					保存
				</view>
			</view>

		</view>
	</view>
</template>

<script>
import RangeSlider from '../../components/custom_views/range-slider.vue';

import showAreaStreetSheet from '../../components/custom_views/show-area-street-sheet.vue';
import showAddPostLabelSheet from '@/PostPage/custom_views/show-add-post-label-sheet.vue';
import { showAreaStreetSheetMixin } from '../../components/custom_views/show-area-street-sheet-mixin'
import showCommonPicker from '../../components/custom_views/show-common-picker.vue';
import { showCommonPickerMixin } from '../../components/custom_views/show-common-picker-mixin';
import { post_add_mixin } from './post_add_mixin'
import { Api } from '../../api/api';
import { CustomDict } from '../../components/custom_views/custom_dict';
import { Dict } from '../../components/custom_views/dict';

export default {
	components: {
		RangeSlider,
		showAreaStreetSheet,
		showCommonPicker,
		showAddPostLabelSheet
	},
	mixins: [
		showAreaStreetSheetMixin,
		showCommonPickerMixin,
		post_add_mixin
	],
	data() {
		let that = this
		return {
			...showAreaStreetSheetMixin.initData,
			...showCommonPickerMixin.initData,
			...post_add_mixin.initData(that),
			showAddPostLabel: false,
			//租金弹窗
			rent: false,
			yusuan: ['5-10k', '5-10k', '5-10k', '5-10k', '不限'],
			acreageList: this.$CustomDict.acreageList,
			rentList: this.$CustomDict.rentList,
			//选中的区间值
			rangeValues: [0, 10],
			//区间最大数
			slideMax: 100,
			//滑动选择 选中的坐标值
			pickerIndex: 1,
			objectArray: [
				{
					id: 0,
					name: '美国'
				},
				{
					id: 1,
					name: '中国'
				},
				{
					id: 2,
					name: '巴西'
				},
				{
					id: 3,
					name: '日本'
				}
			],
			//页面头部标题名称
			titleText: '新建选址需求',
			selectedRegion: {
				areaCode: '',
				areaName: '',
				street: '',
			}
		}
	},
	computed: {
		acreageIndex: {
			get() {
				for (var i = 0; i < this.acreageList.length; i++) {
					if (this.acreageList[i].value == this.postDto.lowerAcreage + '-' + this.postDto.upperAcreage) {
						return i;
					}
				}
				return 0
			}
		},
		rentIndex: {
			get() {
				for (var i = 0; i < this.rentList.length; i++) {
					if (this.rentList[i].value == this.postDto.lowerRent + '-' + this.postDto.upperRent) {
						return i;
					}
				}
				return 0
			}
		},
		industryName(){
			return CustomDict.getDictName(this.postDto.industryId, Dict.IndustryTypeEnum)
		}
		// transferFeeWithWan: {
		// 	get(){
		// 		return postDto.transferFee ? (postDto / 10000) : postDto.transferFee
		// 	}
		// }
	},
	onLoad() {

	},
	methods: {

		confirmLabels(newLabelList){
			console.log('选择的最新的标签列表', newLabelList)
			this.postDto.labelDtoList = newLabelList
			this.showAddPostLabel = false
		},
		// 租金弹窗显示
		rentChange() {
			this.rent = true
		},

		//价格区间组件函数开始-----------
		onRangeChange(e) {
			this.rangeValues = [Math.round(e.minValue), Math.round(e.maxValue)];

			console.log(this.rangeValues);
		},
		test() {
			this.rangeValues = [10, 60];
		},
		//价格区间组件函数结束------------


		changeRegion(changedRegion) {
			let that = this
			that.selectedRegion = changedRegion
		},

		changeAcreage(e) {
			console.log('改变面积', e)
			let acreageAry = this.acreageList[e.detail.value].value.split('-')
			this.postDto.lowerAcreage = acreageAry[0]
			this.postDto.upperAcreage = acreageAry[1]
		},
		changeRent(e) {
			console.log('改变月租金', e)
			let rentAry = this.rentList[e.detail.value].value.split('-')
			this.postDto.lowerRent = rentAry[0]
			this.postDto.upperRent = rentAry[1]
		},


		//滑动选择店铺类型确认事件
		bindPickerChange(e) {
			console.log(e.detail)
			this.pickerIndex = e.detail.value
			this.postDto.xxx = this.objectArray[this.pickerIndex].name
		},
	},
	watch: {},


	// 页面周期函数--监听页面初次渲染完成
	onReady() { },
	// 页面周期函数--监听页面显示(not-nvue)
	onShow() { },
	// 页面周期函数--监听页面隐藏
	onHide() { },
	// 页面周期函数--监听页面卸载
	onUnload() { },
	// 页面处理函数--监听用户下拉动作
	// onPullDownRefresh() { uni.stopPullDownRefresh(); },
	// 页面处理函数--监听用户上拉触底
	// onReachBottom() {},
	// 页面处理函数--监听页面滚动(not-nvue)
	// onPageScroll(event) {},
	// 页面处理函数--用户点击右上角分享
	// onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

.container {
	background-color: #F5F9FA;
	width: 100%;
	min-height: 100vh;

	.rent {
		padding: 40rpx 0;
		text-align: center;
	}

	.tips {
		width: 394rpx;
		height: 168rpx;
		background: url(../images/post_add/post_add_tips.png);
		background-size: 100%;
	}

	.comment_right {
		width: 11rpx;
		height: 17rpx;
		margin-left: 30rpx;
	}

	input {
		width: 200rpx;
		text-align: right;
		color: #666;
	}

	.small-btn {
		width: 72rpx;
		height: 48rpx;
		border-radius: 8rpx;
		color: #000;
		font-size: 24rpx;
		line-height: 44rpx;
		box-sizing: border-box;
		border: 1px solid #000;
		text-align: center;

		&:first-child {
			margin-right: 20rpx;
		}
	}

	.active {
		font-weight: 600rpx;
		background: #F8D247;
	}

	.bh-round-btn {

		margin: 55rpx auto;
	}
}

.header {
	height: 144px;
}

.body {
	margin-left: 16px;
	margin-right: 16px;
	border-radius: 8px;
	padding: 32rpx;
	background: #FFFFFF;
}

.field-wrap {
	padding: 0 32rpx;
	height: 90rpx;
	border-radius: 8px;
	opacity: 1;
	background: rgba(248, 210, 71, 0.1);
	width: 100%;
	margin-bottom: 30rpx;
	box-sizing: border-box;

	.field-prefix {
		width: 6px;
		height: 6px;
		opacity: 1;
		border-radius: 50%;
		background: #000;
		margin-right: 20rpx;
	}

	.field-inactive{
		// flex: 1;
    justify-content: flex-end;
	}
	.field-active{
		color: #333;
	}
}


// 区间组件样式
.rowBox {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	view {
		display: flex;
	}

	.mrg50T {
		margin-top: 50upx;
	}

	.range-slider-block {
		font-size: 24rpx;
		justify-content: center;
		line-height: 50rpx;
	}

	.tips {
		color: #999;
		font-size: 24upx;
		text-align: center;
		margin-top: 100upx;
	}

	.content {
		justify-content: center;
		flex-direction: column;
	}

	.sliderBox {
		justify-content: center;
	}
}
</style>